<template> 	
  <div class="page">
	<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						
						<div class="layui-card-body">							
							<div class="layui-form" lay-filter="">
								
								<div class="layui-form-item">
									<div class="layui-inline">
									    <label class="layui-form-label">类别名称</label>
									    <div class="layui-input-inline" style="width: 180px;">
									        <input type="text" name="name" placeholder="类别名称"  v-model="itemData.categoryName" autocomplete="off" class="layui-input a" maxlength="15">
									    </div>										   
								  </div>
								</div> 	
								<div class="layui-form-item">
									<div class="layui-inline">
									    <label class="layui-form-label">上级目录</label>
									     <div class="layui-input-block">
										    <div class="layui-input-inline" style="width: 180px;margin-bottom:10px" v-for='(item,index) in categorylist'>
										       <select lay-filter="cat"  :name="'cat'+index">
														<option value="0" v-if='index==0'>顶级目录</option>
														<option :value=it.id v-for='it in item' :selected="it.id==itemData.categoryList[index].id">{{it.categoryName}}</option>
														
													</select>
										    </div>
										  </div>
								  </div>
								</div> 	
								 <div class="layui-form-item" style="display:none;">																	
				        	<label class="layui-form-label">栏目类型</label>
				        	<div class="layui-input-block">
										<div class="layui-input-inline" style="width: 180px;margin-bottom:10px">
								       <select lay-filter="catlm"  :name="'catlm'+index">
												<option :value=it.id v-for='item in typelist' :selected="it.id==itemData.typelist[index].id">{{it.name}}</option>
												
											</select>
								    </div>
									</div>															
				        </div>
						    <div class="layui-form-item">
						      <label class="layui-form-label">类别图片</label>
						      <div class="layui-input-inline">
						         <div class="layui-upload">
										  <button type="button" class="layui-btn" id="layuiadmin-upload-useradmin">上传图片</button>
										  <div class="layui-upload-list">
										    <img class="layui-upload-img" id="logo" :src="itemData.logo?itemData.logo:'http://kedoujfpc.tongdui365.com/static/common/image/zwyl.jpg'" width="100" height="100" style="border:1px solid #eee;">
										    <p id="demoText"></p>
										  </div>
										</div>   
						      </div>
						      
						    </div>
						   
						    <div class="layui-form-item">																	
				        	<label class="layui-form-label">排序</label>
				        	<div class="layui-input-block" style="width:190px">
										<input type="text" name="name" placeholder="排序"  v-model="itemData.rank" autocomplete="off" class="layui-input" maxlength="10">
									</div>															
				        </div>
				        
						    
						    
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn layui-btn-normal" lay-submit lay-filter="setmyinfo" @click="confirmOk">确认</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
  </div> 
</template>
<script>

export default {	
  name: 'goodsfladd',  
  data () {
    return { 
    	id:'',  
    	itemData:{
    		logo:"",
    		rank:1,
    		categoryName:"",
    		categoryId:0,
			  "categoryType": {
			    "id":1
			  },
			  "domainName": "",
			  "exhibition": "YES",
			  "status": "ENABLE",
			  "url": "",			 
			  categoryList:[[{id:''}],[{id:''}],[{id:''}]]
    	},
    	categorylist:[[]]
    }
  },
  mounted(){ 
    var _this = this;
    this.getcat(0,0);
    layui.use('upload', function(){
		  var upload = layui.upload;
		  var uploadInst = upload.render({
		    elem: '#layuiadmin-upload-useradmin',//绑定元素
		    data:{
		    	type:3
		    }
		    ,url:imguploadurl //上传接口
		    ,done: function(res){
		    	layer.msg('上传成功');
		    	 _this.itemData.logo=res.msg;
		    }
		    ,error: function(){
		      layer.msg('上传失败');
		    }
		  });
		});
  	window.getdates = this.getdates;
  	
  },
  methods: {  	
		getdates:function(res){
			this.id=res.id;	
			var url='/advert/aapi/v1.9/category/'+res.id;			        
			var _this=this;
			ajaxRequest(url, 'GET', 'json','', function(ret, err){
				//alert(JSON.stringify(ret))
				_this.itemData=ret.data;				
				var arr=ret.data.categoryList;			
					var narr=[];
					if(arr&&arr.length>0){						
						for(var i=0;i<arr.length;i++){
							if(i==0){
								var id=0;					
							}
							else{
								var d=i-1;
								var id=arr[d].id
							}							
							var url=dourl('/advert/papi/v1.9/category/parent/'+id);	
							ajaxRequest(url, 'GET', 'json','', function(ret, err){
								//alert(JSON.stringify(ret))
									var deep=ret.data[0].deep-1;
									narr[deep]=ret.data;
									_this.categorylist=narr;
				  			  _this.$forceUpdate();
							})
						}
					}
					else{						
						var id=0;	
						var url=dourl('/advert/papi/v1.9/category/parent/'+id);			
						ajaxRequest(url, 'GET', 'json','', function(ret, err){
							//alert(JSON.stringify(ret))
								var deep=ret.data[0].deep;							
								narr=ret.data[deep];								
								_this.categorylist=narr;							
				  			_this.$forceUpdate();
						})
					}
			  
			})
				
		},
		getcat:function(id,step){
			var url=dourl('/advert/papi/v1.9/category/parent/'+id);	
			var _this=this;
			ajaxRequest(url, 'GET', 'json','', function(ret, err){
				
				var arr=_this.categorylist;
				if(ret.data.length>0){
					arr[step]=ret.data;
				}
				var narr=[]
				for(var i=0;i<arr.length;i++){
					
					if(i<=step){
						narr.push(arr[i]);
					}
				}
				if(narr.length==0){
					narr=[[]];
				}
				_this.categorylist=narr;

			  _this.$forceUpdate();
			})
		},
  	confirmOk:function(){  		
  		var _this = this;   	
			var len = $(".a").length;
			for(var i = 0; i < len; i++) {
				if($(".a").eq(i).val() == ''||$(".a").eq(i).val()<=0) {
					var msg = $(".a").eq(i).attr("placeholder");
					layer.msg('请输入正确的'+msg);
					return;
				}
			}	
			var pot='POST'
			var dates=this.itemData;
			if(this.id){
				dates.id=this.id;
				pot='PUT';
			}
			//alert(JSON.stringify(dates))
	  	var url='/advert/aapi/v1.9/category';	
			ajaxRequest(url, pot, 'json',dates, function(ret, err){
				//alert(JSON.stringify(ret))
			  layer.msg("操作成功");
			  setTimeout(function(){
			  	var index = parent.layer.getFrameIndex(window.name);	          	
			    parent.layer.close(index);
		      parent.location.reload(); 
	      },1000)
			})
  	}
  },
  updated:function(){		
  	var _this=this;
		layui.use('form', function(){
		  var form = layui.form;
		  form.render();
		  form.on('select(cat)', function(data){
				 	_this.itemData.categoryId=data.value;
				 	var name=data.elem.getAttribute('name');
				 	var arr=name.split("cat");
				  if(data.value==0){
				  	_this.getcat(data.value,0)
				  }
				  else{
				 		_this.getcat(data.value,parseInt(arr[1])+1)
				 	}
			});
		});
		
  },
}
</script>
<style scoped>
</style>
